//
// Variables
// =================================================



// Colors
// colors for use across theme.
// --------------------------------------------------

$whitesmoke   = #f5f5f5
$gainsboro    = #eee
$gray-lighter = #ddd
$grey-light   = #ccc
$grey         = #bbb
$grey-dark    = #999
$grey-dim     = #666
$black-light  = #555
$black-dim    = #333
$black-deep   = #222
$red          = #ff2a2a
$blue-bright  = #87daff
$blue         = #0684bd
$blue-deep    = #262a30



// Scaffolding
// Settings for some of the most global styles.
// --------------------------------------------------

// Global text color on <body>
$text-color                   = $black-light

// Global link color.
$link-color                   = $black-light
$link-hover-color             = $black-deep
$link-decoration-color        = $grey-light
$link-decoration-hover-color  = $black-deep

// Global border color.
$border-color                 = $grey-light

// Background color for <body>
$body-bg-color                = white

// Selection
$selection-bg                 = $blue-deep
$selection-color              = white



// Typography
// Font, line-height, and elements colors.
// --------------------------------------------------

// Font families.
$font-family-sans-serif   = "Avenir Next", Avenir, Tahoma, Vendana, sans-serif
$font-family-serif        = "PT Serif", Cambria, Georgia, "Times New Roman", serif
$font-family-monospace    = "Input Mono", "PT Mono", Consolas, Monaco, Menlo, monospace
$font-family-chinese      = "PingFang SC", "Microsoft YaHei"
$font-family-base         = Lato, $font-family-chinese, sans-serif
$font-family-headings     = Lato, $font-family-chinese, sans-serif
$font-family-posts        = $font-family-base
$font-family-icons        = 'FontAwesome'


// Font Weight
$font-weight-lighter      = 200
$font-weight-light        = 300
$font-weight-normal       = 400
$font-weight-bold         = 600
$font-weight-bolder       = 700


// Font size
$font-size-base           = 14px
$font-size-small          = $font-size-base - 2px
$font-size-smaller        = $font-size-base - 4px
$font-size-large          = $font-size-base + 2px
$font-size-larger         = $font-size-base + 4px

// Headings font size
$font-size-headings-step    = 2px
$font-size-headings-base    = 24px
$font-size-headings-small   = $font-size-headings-base - $font-size-headings-step;
$font-size-headings-smaller = $font-size-headings-small - $font-size-headings-step;
$font-size-headings-large   = $font-size-headings-base + $font-size-headings-step;
$font-size-headings-larger  = $font-size-headings-large + $font-size-headings-step;

// Global line height
$line-height-base         = 2
$line-height-code-block   = 1.6  // Can't be less than 1.3



// Z-index master list
// --------------------------------------------------

$zindex-bottom  = -1
$zindex-1       = 1010
$zindex-2       = 1020
$zindex-3       = 1030
$zindex-4       = 1040
$zindex-5       = 1050



// Table
// --------------------------------------------------
$table-width                    = 100%
$table-border-color             = $gray-lighter
$table-font-size                = 14px
$table-content-alignment        = left
$table-content-vertical         = middle
$table-th-font-weight           = 700
$table-cell-padding             = 8px
$table-cell-border-right-color  = $gainsboro
$table-cell-border-bottom-color = $gray-lighter
$table-row-odd-bg-color         = #f9f9f9
$table-row-hover-bg-color       = $whitesmoke



// Code Blocks
// --------------------------------------------------
$code-font-family = $font-family-monospace
$code-font-size = 13px



// Buttons
// --------------------------------------------------

$btn-font-weight =  normal

$btn-default-radius              = 0
$btn-default-bg                  = $black-deep
$btn-default-color               = white
$btn-default-font-size           = 14px
$btn-default-border-width        = 2px
$btn-default-border-color        = $black-deep
$btn-default-hover-bg            = white
$btn-default-hover-color         = $black-deep
$btn-default-hover-border-color  = $black-deep



// Pagination
// --------------------------------------------------

$pagination-border              = $gainsboro;

$pagination-link-bg             = transparent
$pagination-link-color          = $link-color
$pagination-link-border         = $gainsboro

$pagination-link-hover-bg       = transparent
$pagination-link-hover-color    = $link-color
$pagination-link-hover-border   = $black-deep

$pagination-active-bg           = $grey-light
$pagination-active-color        = white
$pagination-active-border       = $grey-light



// Layout sizes
// --------------------------------------------------

$main-desktop                   = 960px
$main-desktop-large             = 1200px

$content-desktop                = 700px
$content-desktop-large          = 900px
$content-desktop-padding        = 40px

$sidebar-desktop                = 240px

$footer-height                  = 50px

$gap-between-main-and-footer    = 100px



// Headband
// --------------------------------------------------
$headband-height = 3px
$headband-bg     = $black-deep



// Section Header
// Variables for header section elements.
// --------------------------------------------------

$head-bg                = white

// Site Meta
$site-meta-text-align   = center
$brand-color            = white
$brand-hover-color      = white
$brand-bg               = $black-deep
$brand-font-family      = $font-family-base
$site-subtitle-color    = $grey-dark

$subtitle-font-size     = 13px
$subtitle-color         = $grey-dark

// Menu
$menu-link-border       = transparent
$menu-link-hover-border = $black-deep




// Posts Collpase
// --------------------------------------------------
$posts-collapse-left        = 55px
$posts-collapse-left-mobile = 5px

$read-more-color          = white
$read-more-font-size      = 14px
$read-more-bg-color       = $black-deep
$read-more-border-radius  = 0




// Sidebar
// Variables for sidebar section elements.
// --------------------------------------------------
$sidebar-nav-color                = $black-light
$sidebar-nav-hover-color          = $whitesmoke
$sidebar-highlight                = $blue-bright

$site-author-name-color           = $whitesmoke

$site-description-font-size       = 14px
$site-description-color           = $black-light

$site-state-item-count-font-size  = 18px
$site-state-item-count-color      = inherit
$site-state-item-name-font-size   = 13px
$site-state-item-name-color       = inherit
$site-state-item-border-color     = $black-dim

$post-toc-color                   = $grey-dark
$post-toc-hover-color             = $grey-light


// Components
// --------------------------------------------------

// Back to top
$b2t-opacity                  = 1
$b2t-position-bottom          = -100px
$b2t-position-bottom-on       = 19px
$b2t-position-right           = 50px
$b2t-font-size                = 12px
$b2t-color                    = white
$b2t-bg-color                 = $black-deep


//  .post-expand .post-eof
//  In the default (Mist) scheme, margin above and below the post separator
$post-eof-margin-top    = 80px  //  or 160px for more white space
$post-eof-margin-bottom = 60px  //  or 120px for less white space


// Iconography
// Icons SVG Base64
// --------------------------------------------------

// blockquote-center icon
$center-quote-left  = '../images/quote-l.svg'
$center-quote-right = '../images/quote-r.svg'

// search icon
$search-icon = ""
